<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.rightDiv{min-height:400px;margin-left:200px; }
.leftDiv{min-height:400px;float:left;width:200px;}
#logoDiv{float:left; width:200px;};
</style>
</head>
</head>
<body>
<div id="header">
	<div id="logoDiv"><img src="123123.jpg" >
	</div>
        <ul class="nav nav-pills" role="tablist">
          <li role="presentation" class="active"><a href="#">sohu</a></li>
          <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              监控 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#">redis</a></li>
                <li role="presentation"><a href="#">memcache</a></li>
                <li role="presentation"><a href="#">mysql</a></li>
            </ul>
          </li>
          <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              主机管理 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#">机房</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
            </ul>
          </li>
          
            <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              服务 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#">nginx</a></li>
                <li role="presentation"><a href="#">api</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
            </ul>
          </li>
            <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              批量管理 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#">nginx</a></li>
                <li role="presentation"><a href="#">api</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
            </ul>
          </li>
            <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              批量管理 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#">nginx</a></li>
                <li role="presentation"><a href="#">api</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
            </ul>
          </li>
           <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              版本发布 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#">nginx</a></li>
                <li role="presentation"><a href="#">api</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
            </ul>
          </li>
          <li role="presentation"><a href="#">域名管理</a></li>
        </ul>

</div><!--header-->
<div>
    
    <ol class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">Library</a></li>
      <li class="active">Data</li>
    </ol>


</div>
<div id="main">
	<div class="leftDiv">
        <div class="sidebar-menu">
            <a href="#userMeun" class="nav-header menu-first collapsed" data-toggle="collapse"><i class="icon-user-md icon-large"></i> 主机管理</a>
            <ul id="userMeun" class="nav nav-list collapse menu-second">
                <li><a href="#"><i class="icon-user"></i> 增加主机</a></li>
                <li><a href="#"><i class="icon-edit"></i> 修改主机</a></li>
                <li><a href="#"><i class="icon-trash"></i> 删除主机</a></li>
                <li><a href="#"><i class="icon-list"></i> 主机列表</a></li>
                
            </ul><br>
            <a href="#articleMenu" class="nav-header menu-first collapsed" data-toggle="collapse"><i class="icon-book icon-large"></i> 运维人员管理</a>
            <ul id="articleMenu" class="nav nav-list collapse menu-second">
                <li><a href="#"><i class="icon-pencil"></i> 添加人员</a></li>
                <li><a href="#"><i class="icon-list-alt"></i> 删除人员</a></li>
                <li><a href="#"><i class="icon-list"></i> 人员列表</a></li>
            </ul>
        </div>
        
	</div><!--leftDiv-->
	<div class="rightDiv">

        <div >

        

            <div id="container" style="min-width:800px;height:400px"></div>

            <table  class="table table-striped">
                <thead>
                        <tr>
                                <th >服务</th>
                                <th >详细信息</th>
                                <th >联系人</th>
                                <th >其他</th>
                        </tr>
                </thead>
                <tr>
                  <td class="active">...</td>
                  <td class="success">...</td>
                  <td class="warning">...</td>
                  <td class="danger">...</td>
                </tr>
                <tr>
                  <td class="active">...</td>
                  <td class="success">...</td>
                  <td class="warning">...</td>
                  <td class="danger">...</td>
                </tr>
                <tr>
                  <td class="active">...</td>
                  <td class="success">...</td>
                  <td class="warning">...</td>
                  <td class="danger">...</td>

                </tr>
                <tr>
                  <td class="active">...</td>
                  <td class="success">...</td>
                  <td class="warning">...</td>
                  <td class="danger">...</td>
                </tr>
                <tr>
                  <td class="active">...</td>
                  <td class="success">...</td>
                  <td class="warning">...</td>
                  <td class="danger">...</td>
                </tr>
                <tr>
                  <td class="active">...</td>
                  <td class="success">...</td>
                  <td class="warning">...</td>
                  <td class="danger">...</td>
                </tr>
                <tr>
                  <td class="active">...</td>
                  <td class="success">...</td>
                  <td class="warning">...</td>
                  <td class="danger">...</td>
                </tr>
            </table>
        </div>

       

        <nav>
          <ul class="pagination">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">&raquo;</a></li>
          </ul>
        </nav>
        
        
	</div><!--rightDiv-->
</div><!--content-->

                <div class="footer-tools">
                        <a href="javascript:scroll(0,0)" mce_href="javascript:scroll(0,0)">返回顶部</a>
                </div>


</body>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>
<script>


$(function () {
    $('#container').highcharts({
        title: {
            text: 'cpu load',
            x: -20 //center
        },
	    xAxis: {  
			type: 'datetime',  
			labels: {  
				distance:10,
				step: 1,   //x轴的每个标尺，每隔几个点显示一次文字。
				formatter: function () {
					return Highcharts.dateFormat('%d-%H:%M', this.value);  
				}
			}  
		},
        yAxis: {
            title: {
                text: ''
            },
			min:0,									//指定最小值，类似于坐标原点。
			//tickPositions: [0, 25, 50, 75, 100], // 指定竖轴坐标点的值
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '%'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },


        series: [
			{
				name: '1分钟',
				//data: [[1415462400000,9],[1415463000000,8],[1415464200000,7]],
			}
		]



    });
});


    function next(){
	$.getJSON('/load',  function(data){

        $('#container').highcharts().series[0].setData(data);
        
	}); 
    };
    next()
    setInterval(function(){
    next();
    },5000);
    
</script>


</html>



